<template>
  <div class="home">
    <div class="home-header">
      <div class="header-left">
        <img class="header-img" src="../../assets/logo.png" alt="" />
        <el-tabs
          style="height: 100%"
          v-model="activeName"
          @tab-click="handleClick"
        >
          <el-tab-pane
            v-for="(item, index) in topArray"
            :key="index"
            :label="item.title"
            :name="item.name"
          ></el-tab-pane>
        </el-tabs>
      </div>
      <div class="header-right" @click="loginStop">
        <img
          class="right-img"
          src="../../assets/common/home-back-3.png"
          alt=""
        />
        <div class="right-title">SIGN OUT</div>
      </div>
    </div>

    <div class="home-main">
      <div class="main">
<!--        <keep-alive>-->
          <!-- 子页面 -->
          <router-view />
<!--        </keep-alive>-->
      </div>
    </div>

    <div class="home-dropdown" v-if="dropdownShow == true">
      <div class="activity">
        <div
          class="activity-list"
          :class="{ 'list-hover': index >= 1 }"
          v-for="(item, index) in dropdownArray0"
          :key="index"
          @click="activity0Stop(item)"
        >
          {{ item.title }}
        </div>
      </div>

      <div class="activity">
        <div
          class="activity-list"
          :class="{ 'list-hover': index >= 1 }"
          v-for="(item, index) in dropdownArray1"
          :key="index"
          @click="activity1Stop(item)"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "",
      topArray: [
        {
          name: "/main/index",
          title: "Home",
        },
        {
          name: "/main/activity",
          title: "Activity",
        },
        {
          name: "/main/blank",
          title: "Pay & Get Paid",
        },

        // {
        //   name: "/main/marketing",
        //   title: "Marketing For Growth",
        // },
      ],
      //-----------
      dropdownShow: false,
      dropdownArray0: [],
      dropdownArray1: [],
    };
  },
  created() {
    this.indexMet();
  },
  watch: {
    $route: {
      handler(newValue, oldValue) {
        this.indexMet();
      },
      deep: true,
    },
  },
  methods: {
    indexMet() {
      this.activeName = this.$route.fullPath;
    },
    //-------------
    handleClick(tab, event) {
      this.activeName = tab.name;
      this.dropdownShow = false;

      this.dropdownArray0 = [];

      this.dropdownArray1 = [];

      if (this.activeName == "/main/activity") {
        this.dropdownArray0 = [
          {
            title: "Transactions",
          },
          {
            title: "All Transactions",
          },
        ];

        this.dropdownArray1 = [
          {
            title: "Reports",
          },
          {
            title: "All Reports",
          },
        ];

        this.dropdownShow = true;
      } else if (this.activeName == "/main/blank") {
        this.dropdownArray0 = [
          {
            title: "Wallet",
          },
          {
            title: "Balance",
          },
          {
            title: "Banks & Cards",
          },
        ];

        this.dropdownArray1 = [
          {
            title: "Make Payments",
          },
          {
            title: "Send Money",
          },
          {
            title: "Payouts",
          },
        ];

        this.dropdownShow = true;
      }

      this.$router.push({
        path: tab.name,
      });
    },
    openDropdown() {},

    //----------------------------
    activity0Stop(item) {
      if (item.title == "Balance" || item.title == "Banks & Cards") {
        this.$router.push({
          path: "/main/pay",
        });
      } else if (item.title == "All Transactions") {
        this.$router.push({
          path: "/main/transactions",
        });
      }
      this.dropdownShow = false;
    },
    activity1Stop(item) {
      console.log("获取页面", item);
      if (item.title == "Send Money") {
        this.$router.push({
          path: "/main/send",
        });
      } else if (item.title == "Payouts") {
        this.$router.push({
          path: "/main/payout-real",
        });
      } else if (item.title == "All Reports") {
        this.$router.push({
          path: "/main/statement",
        });
      }

      this.dropdownShow = false;
    },
    loginStop() {
      this.$router.push({
        path: "/login",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  position: relative;
  min-height: 100vh;

  .home-header {
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 0 60px;
    box-sizing: border-box;


    .header-left {
      display: flex;
      align-items: center;

      .header-img {
        width: 30px;
        height: 30px;
        margin-right: 30px;
      }

      /deep/ .el-tabs__header {
        margin: 0;
      }

      /deep/ .el-tabs__nav-wrap {
        height: 50px;
      }

      /deep/ .el-tabs__nav-scroll {
        display: flex;
        height: 50px;
        justify-content: center;
      }

      /deep/ .el-tabs__item {
        height: 50px;
        line-height: 50px;
        // width: 150px;
        color: #0060df;
        font-weight: bold;
      }

      /deep/ .el-tabs__item.is-active {
        font-weight: bold;
      }

      /deep/ .el-tabs__nav-wrap::after {
        background-color: unset;
      }
    }
    .header-right {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 10px;
      box-sizing: border-box;
      border-radius: 12px;
      cursor: pointer;
      height: 100%;
      border: 1px solid #ccc;
      background: #0060df;


      .right-img {
        width: 23px;
        height: 26px;
        object-fit: contain;
      }

      .right-title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #fff;
        text-align: left;
        font-style: normal;
        margin-left: 8px;
      }
    }

    .header-right:hover {
      background: red;

      .right-title {
        color: #fff;
      }
    }
  }

  .home-main {
    height: calc(100vh - 50px);

    .main {
      height: 100%;
    }
  }

  .home-dropdown {
    position: absolute;
    top: 50px;
    left: 200px;
    padding: 20px 40px 40px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 5px;
    display: flex;

    .activity {
      .activity-list {
        margin-right: 100px;
        text-align: left;

        font-size: 14px;

        margin-bottom: 20px;
      }

      .activity-list:first-child {
        font-weight: bold;
        color: #000;
        text-decoration: unset;
      }

      .activity-list:first-child {
        font-weight: bold;
        color: #000;
      }

      .activity-list:last-child {
        margin-right: 0;
        margin-bottom: 0;
      }

      .list-hover:hover {
        text-decoration: underline;
        cursor: pointer;
      }
    }
  }
}
</style>
